<!-- H5文档声明语法，告诉浏览器按照最新HTML5 的格式进行语法解析 -->
<!DOCTYPE html>
<!-- 根标签--文档类型 lang="en"表示当前网页默认识别英文，高版本浏览器会提示是否进行翻译-->
<html lang="en">
    <!-- 头--设置网页的基本属性设置 -->
    <head>
        <!-- 编码格式，防止页面乱码 -->
        <!-- <meta charset="UTF-8"> -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>基本标签</title>
    </head>
    <body>
        <!-- 注释作用：方便团队开发，也可以注释写入代码功能或者开发人员等 -->
        <!-- 
            1、分类：
                块级元素/标签（换行、可以设置宽高）、
                行内元素/标签（不换行、可以设置宽高）、
                行内块级元素/标签（不换行、可以设置宽高） 
            2、文章标题标签hn
            3、文章段落标签p
            4、水平分割线hr
            5、普通行内文本标签span
            6、换行标签<br>、单标签所以也可以写成<br />自闭和写法
            7、浏览器默认解析行为：会自动将浏览器的空格合并解析成一个空格
            8、文本标记类
                b加粗、i切斜、u下划线、s删除线、sup上标、sub下标
            9、布局标签div
            10、通俗记忆：
                行内标签/元素（不会自动换行）-span、文本类（b加粗、i切斜、u下划线、s删除线、sup上标、sub下标）
                块级标签/元素（会自动换行）- hn、p、hr、div
            11、H5新增功能性标签
                video视频---src视频路径、controls控件
                audio音频---src音频路径、controls控件
        -->
        <!-- 快捷键---$为变量、{}为标签内容 -->
        <!-- h${标题$}*6 -->
        <h1>标题1</>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
        <!-- 文章段落标签 -->
        <p>
            念奴娇-生辰有怀 人生一世，四季有序，今树经一轮，而余长一岁；<br>
            其二十六载空悲切，未忘其心； 然花开不择贫家地
            念奴娇-生辰有怀 人生一世，四季有序，今树经一轮，而余长一岁；<br />
            其二十六载空悲切，未忘其心； 然花开不择贫家地
            念奴娇-生辰有怀 人生一世，四季有序，今树经一轮，而余长一岁；<br />
            其二十六载空悲切，未忘其心； 然花开不择贫家地
            念奴娇-生辰有怀 人生一世，四季有序，今树经一轮，而余长一岁；<br />
        </p>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <!-- 水平分割线hr -->
        <hr>
        <hr>
        <hr>
        <hr>
        <!-- 普通行内文本标签span，不会自动换行 -->
        <span>大家好</span>
        <span>我叫</span>
        <span>蔡徐坤</span>
        <span>我会CTRL</span>
        <hr>
        <!-- 文本标记类 -->
        <span>普通行内文本</span>
        <b>加粗文本</b>
        <i>倾斜</i>
        <u>下划线</u>
        原价：<s>998</s>，现价99
        2<sup>2</sup>=4
        H<sub>2</sub>O
        <!-- 布局标签（HTML呈现效果和p类似，但是网页开发常用于区域划分-标签语义化） -->
        <div>布局</div>
        <div>布局</div>
        <div>布局</div>
        <!-- 功能性标签 -->
        <!-- video视频、src视频路径、controls控件 -->
        <video 
            width="300"
            controls
            src="https://f.video.weibocdn.com/hmXuk8eXlx07DALG1anC01041205h9k10E020.mp4?label=mp4_1080p&template=1920x1080.25.0&trans_finger=daa7c63436091a9dfe20e4b554312cac&media_id=4509153058553887&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=3ZoTIp&ab=966-g1,3370-g1&Expires=1606811454&ssig=M4%2B05oTbfq&KID=unistore,video"
        ></video>
        <!-- audio音频、、src音频路径、controls控件 -->
        <audio 
            src="http://aqqmusic.tc.qq.com/amobile.music.tc.qq.com/C400000NHikR1jV7Zz.m4a?guid=5196020250&vkey=4E76CDDBE9AF3747E83FB7C6FD5CC46C859ACA42C5CD6A6C3B4E36A57F7B474A1DDDA91FA50A93DB7259C8579BF93DA98B49759F07881DD6&uin=0&fromtag=38"
            controls
        ></audio>
    </body>
</html>


